<template>
  <view class="container">
    <view class="title">
      <text>联系我们</text>
    </view>
	<view class="one-list">
	  <image class="one-img" src="https://p3.ssl.qhimgs1.com/sdr/400__/t01b749161785215e13.jpg"></image>
	</view>
    <view class="order-list">
      <view class="order-item">
        <view class="order-header">
          <text >联系电话 </text>
          <image class="phone" src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fa3e25a7e3f031021cdb9/64953d8c726ab50011f31941/16875022281848059884.png"></image>
        </view>
        <view class="order-body">
          <view class="product-info">
            <text class="product-name" @click="phone">联系热线:19510198382(点击拨打)</text>
			<text class="product-mail">电子邮箱:2394930599@qq.com</text>
          </view>
        </view>
      </view>
    </view>
	<view class="map">
		<view class="map-item">
		  <view class="map-header">
		    <text >地图定位 </text>
		    <image class="map-img" src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fa3e25a7e3f031021cdb9/64953d8c726ab50011f31941/16875022281831993036.png"></image>
		  </view>
		  <view class="map-body">
		    <view class="map-info">
		      <view class="map-name">
				  <map class="map-map" :longitude="longitude" :latitude="latitude" :scale="14" :markers="markers"></map>
			  </view>
		    </view>
		  </view>
		</view>
	</view>
	<footer class="footer">
		<p>&copy; 2023. All rights reserved.</p>
	</footer>
  </view>
</template>

<script>

export default {
  data() {
    return {
		longitude:117.375732,
		latitude:36.668223,
		markers: [{
			id:0,
			longitude:117.375732,
			latitude:36.668223,
			iconPath:'../../static/map.png',
			width:30,
			height:30,
			alpha:0.7
			}]
		}
	},
	methods: {
		phone() {
			uni.makePhoneCall({
				phoneNumber: '19510198382'
			}).catch((e) => {
			})
		}
	}
  
}
</script>

<style  lang="scss">
.container {
    overflow: hidden;
    font-family: HYQihei 40S;
    height: 100%;
    width: 100%;
    top:0;
    left: 0;
    overflow-y: auto;
    background-image: linear-gradient(343.2deg, #b0de7829 33%, #e6454599 70.3%);
    overflow: hidden;
  .title{
	  font-size: 42rpx;
	  font-weight: bold;
	  margin-bottom: 30rpx;
	  margin-left: 40rpx;
	  color: #333;
  }
  .one-list {
	  margin: 6rpx 50rpx 20rpx 50rpx;
	  box-shadow: 0px 0px 3px 3px #f8baba;
	  border-radius: 10px;
	  justify-content: center;
	  align-items: center;
	  overflow: hidden;
	  .one-img {
		  	width: 100%;
		  	height: 300rpx;
			border-radius: 10px;
			overflow: hidden;
	  }
  	}
  .order-list {
	 margin: 10rpx 20rpx 10rpx 20rpx;
	 padding: 0 10px;
	 overflow: hidden;
	 
	  .order-item {
		  margin: 10rpx 5rpx 5rpx 10rpx;
		  padding: 0 10px;
		  height: 170rpx;
		  box-shadow: 0px 0px 3px 3px #f8baba;
		  border: 1px solid #EBEEF5;
		  background-color: rgba(255, 209, 205, 1);
		  border-radius: 10px;
		  .order-header {
			  display: flex;
			  justify-content: space-between;
			  font-size: 35rpx;
			  margin-top: 10rpx;
			  font-weight: bold;
			  .phone {
				  width: 40rpx;
				  height: 40rpx;
			  }
		  }
		  .order-body {
			  display: flex;
			  align-items: center;
			  padding-top: 20rpx;
			  height: 100rpx;
			
			  .product-info {
				  margin-top: 1rpx;
				  justify-content: center;
				  display: flex;
				  flex: 1;
				  flex-direction: column;
				  .product-name {
					  diaplay:flex;
					  flex-direction: raw;
					  align-items: center;
					  font-size: 30rpx;
					  color: #333;
					  margin-bottom: 8rpx;
					 
					  
				  }
				  .product-mail {
					  diaplay:flex;
					  flex-direction: raw;
					  align-items: center;
					  font-size: 30rpx;
					  color: #333;
				  }
				 
			  }
			
		  }
	  }
  }
  .map {
  	 margin: 5x;
  	 overflow: hidden;
  	 
  	  .map-item {
  		  margin: 10rpx 45rpx 15rpx 50rpx;
  		  padding: 0 10px;
		  height: 550rpx;
  		  box-shadow: 0px 0px 3px 3px #f8baba;
  		  border: 1px solid #EBEEF5;
  		  background-color: rgba(255, 209, 205, 1);
  		  border-radius: 10px;
  		  .map-header {
  			  display: flex;
  			  justify-content: space-between;
  			  font-size: 35rpx;
  			  margin-top: 10rpx;
  			  font-weight: bold;
  			  .map-img {
  				  width: 40rpx;
  				  height: 50rpx;
  			  }
  		  }
  		  .map-body {
			  margin: 2px 5px 1px 5px;
  			  display: flex;
  			  align-items: center;
  			  padding-top: 20rpx;
  			  
  			  .map-info {
  				  
  				  justify-content: center;
  				  display: flex;
  				  flex: 1;
  				  flex-direction: column;
				  justify-content: center;
  				  .map-name {
					
					 overflow: hidden;
					 height: 430rpx;
					 background-color:#ffffff;
					 border-radius: 8px;
					 box-shadow: 0px 0px 4px 1px #e6454599;
					 .map-map {
						 width: 100%;
						 height: 100%;
					 }
  				  }
  			  }
  			
  		  }
  	  }
  }
  .footer {
  	text-align: center;
  	padding: 20rpx 0;
  	font-size: 14rpx;
  }
}

</style>